import React, { useState } from 'react';
import { IFormItem, Itype } from '@/base-ui/form';
import http from '@/services/request';
import { Space, Button, Select } from 'antd';
import { IToolButton } from '@/base-ui/tool-bar';
import { Input } from 'antd';
import { RightOutlined, UpOutlined } from '@ant-design/icons';

// import { ColumnProps } from 'antd/es/table'
const { Option } = Select;
const { Search } = Input;

//入库映射表
export const repoNameId: any = {
  '辅料仓库1': 17,
  '辅料仓库2': 18,
  '辅料仓库3': 20,
  '肉鸡速冻库1': 21,
  '肉鸡速冻库2': 22,
  '肉鸡速冻库3': 23,
  '肉鸡冷藏库1': 24,
  '肉鸡冷藏库2': 25,
  '肉鸡冷藏库3': 26
}
//table的数据名 id customerName  numberOfPieces only  weight pickupDate pickupPerson remark
/* 搜索区域 */
/* 搜索区域 */
export const PageSearchConfig: IFormItem[] = [
  {
    type: 'input' as Itype,
    label: '生产批号',
    name: 'batchNumber',
    placeholder: '请输入生产批号'
  },

  {
    type: 'input' as Itype,
    label: '产品名称',
    name: 'productName',
    placeholder: '请输入产品名称'
  },
  {
    type: 'input' as Itype,
    label: '材料名称',
    name: 'matName',
    placeholder: '请输入材料名称'
  },
  {
    type: 'input' as Itype,
    label: '供应商',
    name: 'supplier',
    placeholder: '请输入供应商'
  },

  {
    type: 'select' as Itype,
    label: '件数',
    name: 'cases',
    placeholder: '请选择件数区间',
    options: [
      { label: '1000件以下', value: 'value1' },
      { label: '1000-5000', value: 'value2' },
      { label: '5000-20000', value: 'value3' },
      { label: '20000以上', value: 'value4' }
    ]
  },
  {
    type: 'select' as Itype,
    label: '只数',
    name: 'quantity',
    placeholder: '请选择只数区间',
    options: [
      { label: '1000只以下', value: 'value1' },
      { label: '1000-5000', value: 'value2' },
      { label: '5000-20000', value: 'value3' },
      { label: '20000以上', value: 'value4' }
    ]
  },
  {
    type: 'select' as Itype,
    label: '重量',
    name: 'weight',
    placeholder: '请选择重量区间',
    options: [
      { label: '100kg以下', value: 'value1' },
      { label: '100-500', value: 'value2' },
      { label: '500-2000', value: 'value3' },
      { label: '2000以上', value: 'value4' }
    ]
  },
  {
    type: 'select' as Itype,
    label: '规格',
    name: 'specification',
    placeholder: '请选择规格区间',
    options: [
      { label: '100kg以下', value: 'value1' },
      { label: '100-500', value: 'value2' },
      { label: '500-2000', value: 'value3' },
      { label: '2000以上', value: 'value4' }
    ]
  },
  {
    type: 'select' as Itype,
    label: '单价',
    name: 'unit',
    placeholder: '请选择单价区间',
    options: [
      { label: '1000元以下', value: 'value1' },
      { label: '1000-5000', value: 'value2' },
      { label: '5000-20000', value: 'value3' },
      { label: '20000以上', value: 'value4' }
    ]
  },

  {
    type: 'input' as Itype,
    label: '收货商',
    name: 'receiver',
    placeholder: '请输入收货商'
  },
  {
    type: 'input' as Itype,
    label: '单位',
    name: 'unit',
    placeholder: '请输入单位'
  },

  {
    type: 'input' as Itype,
    label: '备注',
    name: 'remark',
    placeholder: '请输入备注'
  }
];

//高级检索
export const UseSearch = (props: any) => {
  return (
    <Space style={{ float: 'right' }}>
      {props.isMoreSearchShow ? (
        <Button
          type="link"
          size="large"
          /* onClick={() => onMoreSearchClick(false)} */
          onClick={() => {
            props.setisMoreSearchShow(false);
            props.setsearchMore(false);
          }}
        >
          收起
          <UpOutlined />
        </Button>
      ) : (
        <>
          <Button
            type="link"
            size="middle"
            onClick={() => {
              props.setisMoreSearchShow(true);
              props.setsearchMore(true);
            }}
          >
            高级检索
            <RightOutlined style={{ marginLeft: '1px' }} />
          </Button>
        </>
      )}
    </Space>
  );
};

export const addFormConfig: IFormItem[] = [
  {
    type: 'input' as Itype,
    label: '产品名称',
    placeholder: '请输入产品名称'
  },
  {
    type: 'input' as Itype,
    label: '供应商',
    placeholder: '请输入供应商'
  },

  {
    type: 'select' as Itype,
    label: '件数',
    placeholder: '请选择件数区间',
    options: [
      { label: '1000件以下', value: 'value1' },
      { label: '1000-5000件', value: 'value2' },
      { label: '5000-20000件', value: 'value3' },
      { label: '20000件以上', value: 'value4' }
    ]
  },
  {
    type: 'input' as Itype,
    label: '收货商',
    placeholder: '请输入收货商'
  },
  {
    type: 'input' as Itype,
    label: '备注',
    placeholder: '请输入备注'
  }
];

/* 工具栏区域 */

// // 选择器配置
// export const SearchSelector: ISearchSelector = {
//   Options: [
//     { label: '订单编号', value: '1' },
//     { label: '商品名称', value: '2' },
//     { label: '销售单位', value: '3' }
//   ],
//   defaultValue: '1',
//   id:8
// }

export const SearchSelector = (props: any) => {
  // 默认的查找方式设置为按客户名查找
  const [searchid, setsearchid]: any = useState('productName');
  return (
    <div
      style={{
        display: 'inline-block',
        width: '380px',
        marginBottom: 10,
        marginRight: 10,
        float: 'right'
      }}
    >
      <Select
        defaultValue={Options[0].label}
        style={{ width: 100 }}
        defaultActiveFirstOption
        onChange={(value, record) => {
          setsearchid(value);
        }}
      >
        {Options.map((i) => (
          <Option value={i.label} key={i.value} children={undefined}></Option>
        ))}
      </Select>
      <Search
        placeholder="请输入您要查的数据"
        onSearch={(e) => {
          if (!e) {
            http.get('/server/inSlaughter/list/1/10').then((res) => {
              props.dataSource(res.data.records);
            });
          } else {
            http.post(`/server/inSlaughter/get`, {
              [searchid]: e,
            }).then((res) => {
              props.dataSource(res.data);
            });
          }
        }}
        style={{ width: '280px' }}
        enterButton
      />
    </div>
  );
};
export const Searchdow = () => {
  return;
};
const Options = [
  { label: '产品名称', value: 'productName', onClick: (e: any) => {} },
];

// 按钮组
export const buttonGroup: IToolButton[] = [
  { type: 'delete', text: '批量删除', isShow: true, onClick: () => {} },
  { type: 'import', text: '导入', isShow: true, onClick: () => {}, id: 9 },
  { type: 'export', text: '导出', isShow: true, onClick: () => {}, id: 10 }
];

//复选框的接口
export interface DataType {
  key: React.Key;
  id: string;
  name: string;
  age: number;
  address: string;
}
